<template>
  <div>
    <!-- Layout 布局组件。通过基础的24分栏，迅速简便地创建布局。6+6+6+6 -->
    <!-- Row 组件。提供 gutter 属性来指定每一栏之间的间隔，默认间隔为 0。 -->
    <el-row :gutter="10" style="margin-bottom: 16px">
      <el-col :span="6">
        <el-card>
          <DetailView title="总销售额" count="126560">
            <template v-slot:charts>
              <span>周同比:&nbsp;56.67%&nbsp;<svg t="1699760717992" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="19198" width="18" height="18"><path d="M512 0l341.333333 349.354667-273.066666-0.085334V1024H443.733333V349.269333H170.666667L512 0z" fill="#d81e06" p-id="19199" /></svg></span>
              <span>日同比:&nbsp;45.78%&nbsp;<svg t="1699760581542" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="14695" width="18" height="18"><path d="M512 1024L170.666667 674.645333l273.066666 0.085334V0h136.533334v674.730667H853.333333L512 1024z" fill="#d81e06" p-id="14696" /></svg></span>
            </template>
            <template v-slot:footer>
              <span>日销售额:&nbsp;￥&nbsp;12423.00&nbsp;(元)</span>
            </template>
          </DetailView>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <DetailView title="总访问量" count="88460">
            <template v-slot:charts>
              <LineChartView />
            </template>
            <template v-slot:footer>
              <span>日访问量:&nbsp;1024&nbsp;(PV)</span>
            </template>
          </DetailView>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <DetailView title="支付笔数" count="88460">
            <template v-slot:charts>
              <BarChartView />
            </template>
            <template v-slot:footer>
              <span>转换率:&nbsp;64%&nbsp;(P/B)</span>
            </template>
          </DetailView>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <DetailView title="运营活动效果" count="78%">
            <template v-slot:charts>
              <ProgressBarView />
            </template>
            <template v-slot:footer>
              <span>周同比:&nbsp;56.67%&nbsp;<svg t="1699760717992" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="19198" width="18" height="18"><path d="M512 0l341.333333 349.354667-273.066666-0.085334V1024H443.733333V349.269333H170.666667L512 0z" fill="#d81e06" p-id="19199" /></svg></span>
              <span>日同比:&nbsp;49.96%&nbsp;<svg t="1699760581542" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="14695" width="18" height="18"><path d="M512 1024L170.666667 674.645333l273.066666 0.085334V0h136.533334v674.730667H853.333333L512 1024z" fill="#d81e06" p-id="14696" /></svg></span>
            </template>
          </DetailView>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import DetailView from '@/views/dashboard/card/detail/DetailView.vue'
import LineChartView from '@/views/dashboard/card/linechart/LineChartView.vue'
import BarChartView from '@/views/dashboard/card/barchart/BarChartView.vue'
import ProgressBarView from '@/views/dashboard/card/progressbarchart/ProgressBarChartView.vue'

export default {
  name: 'CardView',
  components: {
    DetailView,
    LineChartView,
    BarChartView,
    ProgressBarView
  }
}
</script>

<style>

</style>
